<template>
    <el-menu
        :collapse="collapse" 
        :default-active="activeMenuId"
        router 
        class="menu">
        <template v-for="item in menuData">
            <el-menu-item v-if="item.route && !item.children"
                :route="item.route"
                :index="item.id"
                :key="item.id">
                <template #title>{{ item.title }}</template>
            </el-menu-item>
            
            <el-sub-menu v-else
                :index="item.id"
                :key="item.id">
                <template #title>
                    <span>{{ item.title }}</span>
                </template>
                <el-menu-item v-for="subItem in item.children" 
                    :index="subItem.id"
                    :route="subItem.route"
                    :key="subItem.id">
                    <template #title>{{ subItem.title }}</template>
                </el-menu-item>
            </el-sub-menu>
        </template>
    </el-menu>
</template>

<script>
import { computed, watch } from 'vue';
import { useStore } from 'vuex';
import { useRoute } from 'vue-router';

export default {
    name: 'Menu',
    props: ['collapse'],
    setup() {
        const store = useStore();
        const route = useRoute();

        // 用户菜单
        const menuData = computed(() => {
            return store.getters['user/userMenus']
        });

        // 高亮菜单
        const activeMenuId = computed(() => {
            return store.state.user.activeMenu.id;
        })

        // 监听路径变化
        watch(() => route.path, async() => {
            let siteRoute = {};
            if(route.name === 'siteOrganization' || route.name === 'siteService') {
                siteRoute = store.state.site?.siteRoute || {};
                if(!siteRoute.id) {
                    try {
                        let data = await getInstitutionInfo();
                        siteRoute = {id: data.id, name: data.customName || data.institutionName};
                    }catch(err) {
                        console.log(err);
                    }
                }
            }
            store.commit('user/setCurrentMenu', {
                currentName: route.name,
                activeMenuName: route.meta.activeMenuName,
                currentPath: route.path,
                currentMeta: route.meta,
                siteRoute: siteRoute
            })
        }, {
            immediate: true
        })

        // 获取站点信息
        function getInstitutionInfo () {
            return new Promise((resolve, reject) => {
                store.dispatch('proxyAction', {
                    name: 'getInstitutionInfo',
                    queries: {
                        id: route.query.id
                    }
                }).then((res) => {
                    resolve(res.data || {});
                })
            }) 
        }

        return {
            menuData,
            activeMenuId,
            getInstitutionInfo
        }
    }
}
</script>
